<template>
  <view>
    <view class="container">
      <custom-header title="企业认证"></custom-header>
      <!--			<view style="font-size: 28rpx; color: black; margin-top: 30rpx; margin-left: 70rpx">营业执照</view>-->
      <!--			<view class="img-view">-->
      <!--				<image :src="idCardImage || defaultImage" mode="aspectFit" class="id-card-image" @click="previewImage">-->
      <!--				</image>-->
      <!--				<view @click="toChoose()" v-if="!idCardImage" class="upload-btn">上传</view>-->
      <!--			</view>-->
      <!-- 表单区域 -->
      <view class="form-container">
        <view class="form-item">
          <text class="item-label">法人姓名</text>
          <text class="input">{{faName}}</text>
        </view>
        <view class="form-item">
          <text class="item-label">法人证件号</text>
          <text class="input">{{faId}}</text>
        </view>
        <view class="form-item">
          <text class="item-label">公司名称</text>
          <input class="input" placeholder="请输入公司名称" v-model="companyName" placeholder-class="placeholder" />
        </view>
        <view class="form-item">
          <text class="item-label">统一社会信用代码</text>
          <input class="input" placeholder="请输入统一社会信用代码" v-model="companyId" placeholder-class="placeholder" />
        </view>
        <view class="form-item">
          <text class="item-label">公司电话</text>
          <input class="input" placeholder="请输入公司电话" v-model="companyPhone" placeholder-class="placeholder" />
        </view>
        <view class="form-item">
          <text class="item-label">公司邮箱</text>
          <input class="input" placeholder="请输入公司邮箱" v-model="email" placeholder-class="placeholder" />
        </view>
        <view class="form-item">
          <text class="item-label">联系地址</text>
          <input class="input" placeholder="请输入联系地址" v-model="address" placeholder-class="placeholder" />
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" @click="handleSubmit">提交认证</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultImage: "/static/images/ic_company_auth_bg.png", // 示例图片路径
      idCardImage: "", // 用户上传的图片路径
      faName: "",
      faId: "",
      companyName: "",
      companyPhone: "",
      companyId: "",
      address: "",
      email: ""
    }
  },
  onShow() {
    this.loadUserData()
  },
  methods: {
    //更新用户信息
    async loadUserData() {
      const res = await this.$http({
        method: 'GET',
        url: '/user/base/info',
      });
      const user = res.data;
      this.$app.setUserInfo(user);

      if (user) {
        this.faName = user.name;
        this.faId = user.idNum;
      }
    },
    toChoose() {
      uni.showActionSheet({
        itemList: ["拍照", "从相册选择"],
        success: (res) => {
          const sourceType = res.tapIndex === 0 ? ["camera"] : ["album"];
          this.chooseImage(sourceType);
        }
      });
    },
    // 选择图片
    chooseImage(sourceType) {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"], // 压缩图片节省资源
        sourceType, // 动态传入来源（相机/相册）
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.idCardImage = tempFilePath; // 更新图片路径
          this.uploadImage(tempFilePath); // 上传到服务器（可选）
        },
        fail: (err) => {
          uni.showToast({
            title: "取消选择",
            icon: "none"
          });
        }
      });
    },
    // 上传图片到服务器（根据需求可选）
    uploadImage(filePath) {
      // uni.uploadFile({
      // 	url: "https://your-api.com/upload",
      // 	filePath,
      // 	name: "file",
      // 	header: {
      // 		"Authorization": "Bearer token"
      // 	},
      // 	success: (res) => {
      // 		console.log("上传成功", JSON.parse(res.data));
      // 	},
      // 	fail: (err) => {
      // 		uni.showToast({
      // 			title: "上传失败",
      // 			icon: "none"
      // 		});
      // 	}
      // });
    },
    // 预览大图
    previewImage() {
      if (!this.idCardImage) return;
      uni.previewImage({
        urls: [this.idCardImage] // 支持多图预览，此处仅当前图片
      });
    },
    async handleSubmit(){
      if (!this.companyName) {
        uni.showToast({
          title: '请输入公司名称',
          icon: 'none'
        })
        return;
      }

      if (!this.companyPhone) {
        uni.showToast({
          title: '请输入公司电话',
          icon: 'none'
        })
        return;
      }

      if (!this.email) {
        uni.showToast({
          title: '请输入公司邮箱',
          icon: 'none'
        })
        return;
      }

      if (!this.companyId) {
        uni.showToast({
          title: '请输入统一社会信用代码',
          icon: 'none'
        })
        return;
      }

      if (!this.address) {
        uni.showToast({
          title: '请输入联系地址',
          icon: 'none'
        })
        return;
      }

      const res = await this.$http({
        method: 'POST',
        url: '/user/enterprise',
        data: {
          company: this.companyName,
          regnum: this.companyId,
          addr: this.address,
          mobile: this.companyPhone,
          email: this.email,
        }
      });

      if (res){
        uni.showToast({
          title: '提交成功，请等待审核！'
        })
        uni.navigateBack()
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  height: 100vh;
  background-color: #F7FAFF;
  display: flex;
  flex-direction: column;
}

.img-view {
  margin-top: 32rpx;
  height: 316rpx;
  width: 610rpx;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.id-card-image {
  width: 100%;
  height: 100%;
  border: 1rpx dashed #ccc;
  border-radius: 10rpx;
}

.upload-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 居中定位 */
  background: #4D7EF4;
  color: white;
  padding: 2rpx 30rpx;
  border-radius: 12rpx;
  z-index: 10;
  /* 确保按钮在图片上层 */
}

.form-container {
  background: white;
  padding: 0 70rpx;
  margin-top: 30rpx;

  /* 表单样式 */
  .form-item {
    padding: 30rpx 0;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.09);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item-label {
    font-size: 28rpx;
    color: #000;
  }

  .input {
    text-align: right;
    flex: 1;
    font-size: 28rpx;
    color: #000;
    height: 48rpx;
  }

  .placeholder {
    color: rgba(0, 0, 0, 0.40);
  }
}

/* 提交按钮 */
.submit-btn {
  margin: 0 32rpx;
  margin-top: 80rpx;
  background-color: #4D7EF4;
  color: #FFF;
  border-radius: 8rpx;
  text-align: center;
  font-size: 28rpx;
  padding: 18rpx 0;
}
</style>